<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SPA Demo - Vue3</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        input, button {
            padding: 8px;
            margin: 5px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        button {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        nav {
            margin-bottom: 20px;
        }
        nav button {
            background-color: #0066cc;
            margin-right: 10px;
        }
        nav button.active {
            background-color: #004080;
        }
        .counter-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 15px;
        }
        .tab-content {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <nav>
            <button @click="currentTab = 'textBinding'" :class="{ active: currentTab === 'textBinding' }">文本绑定</button>
            <button @click="currentTab = 'counter'" :class="{ active: currentTab === 'counter' }">计数器</button>
            <button @click="currentTab = 'list'" :class="{ active: currentTab === 'list' }">列表</button>
        </nav>
        
        <div class="container">
            <h1>SPA Demo - Vue3 双向数据绑定</h1>
            <p>这是一个使用Vue3实现的单页面应用(SPA)，展示了开箱即用的双向数据绑定特性。</p>
            
            <!-- 文本绑定标签页 -->
            <div v-if="currentTab === 'textBinding'" class="tab-content">
                <h2>文本绑定示例</h2>
                <p>在Vue3中，使用v-model指令可以轻松实现双向数据绑定：</p>
                
                <div>
                    <label for="inputText">输入文本：</label>
                    <input v-model="inputText" id="inputText" placeholder="在这里输入文本">
                </div>
                
                <div style="margin-top: 15px;">
                    <p>显示区域：<span>{{ inputText || '尚未输入' }}</span></p>
                </div>
                
                <div style="margin-top: 20px;">
                    <h3>控制台验证说明：</h3>
                    <p>1. 在输入框中输入文本，会自动同步到显示区域</p>
                    <p>2. 打开浏览器控制台，输入 <code>app.inputText</code> 查看当前值</p>
                    <p>3. 在控制台中输入 <code>app.inputText = '新值'</code> 来设置新值</p>
                    <p>4. 观察输入框和显示区域自动更新</p>
                </div>
            </div>
            
            <!-- 计数器标签页 -->
            <div v-if="currentTab === 'counter'" class="tab-content">
                <h2>计数器示例</h2>
                <p>Vue3的响应式系统会自动追踪数据变化并更新DOM：</p>
                
                <div class="counter-container">
                    <button @click="counter--">-</button>
                    <span>{{ counter }}</span>
                    <button @click="counter++">+</button>
                </div>
                
                <div style="margin-top: 20px;">
                    <h3>控制台验证说明：</h3>
                    <p>1. 点击"+"或"-"按钮改变计数器值</p>
                    <p>2. 打开浏览器控制台，输入 <code>app.counter</code> 查看当前值</p>
                    <p>3. 在控制台中输入 <code>app.counter = 10</code> 设置计数器值为10</p>
                    <p>4. 观察页面上的计数器自动更新</p>
                </div>
            </div>
            
            <!-- 列表标签页 -->
            <div v-if="currentTab === 'list'" class="tab-content">
                <h2>列表绑定示例</h2>
                <p>Vue3可以轻松处理数组的双向绑定：</p>
                
                <div>
                    <input v-model="newItem" placeholder="输入新项目">
                    <button @click="addItem">添加项目</button>
                </div>
                
                <ul style="margin-top: 15px;">
                    <li v-for="(item, index) in items" :key="index">
                        <input v-model="items[index]" style="width: 200px;">
                        <button @click="removeItem(index)" style="background-color: #f44336;">删除</button>
                    </li>
                </ul>
                
                <div style="margin-top: 20px;">
                    <h3>控制台验证说明：</h3>
                    <p>1. 添加、编辑或删除列表项</p>
                    <p>2. 打开浏览器控制台，输入 <code>app.items</code> 查看当前数组</p>
                    <p>3. 在控制台中输入 <code>app.items.push('新项目')</code> 添加新项目</p>
                    <p>4. 在控制台中输入 <code>app.items[0] = '修改后的项目'</code> 修改第一个项目</p>
                    <p>5. 观察页面上的列表自动更新</p>
                </div>
            </div>
            
            <div style="margin-top: 30px;">
                <h3>Vue3 双向数据绑定的优势</h3>
                <ul>
                    <li>开箱即用的响应式系统，无需手动实现数据绑定</li>
                    <li>数据变化自动同步到视图</li>
                    <li>视图变化自动同步到数据模型</li>
                    <li>简化了前端开发，提高了开发效率</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        
        const app = createApp({
            data() {
                return {
                    currentTab: 'textBinding',
                    inputText: '',
                    counter: 0,
                    newItem: '',
                    items: ['项目1', '项目2', '项目3']
                }
            },
            methods: {
                addItem() {
                    if (this.newItem.trim()) {
                        this.items.push(this.newItem);
                        this.newItem = '';
                    }
                },
                removeItem(index) {
                    this.items.splice(index, 1);
                }
            },
            mounted() {
                // 在控制台暴露应用实例以便验证
                window.app = this;
                console.log('Vue3 SPA Demo 已加载。使用 window.app 对象进行控制台验证。');
                console.log('可验证的属性：inputText, counter, items');
            }
        });
        
        app.mount('#app');
    </script>
</body>
</html>